<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/vue.js">
    </script>
</head>
<body>

    
    <!-- 

        1.想让vue工作 必须创建vue实例，且要传入配置对象
        2.root容器代码必须符合html规范，只不过需要vue语法
        3.root容器里面的代码被称为vue模板
        4.Vue实例和容器是一一对应的：
        5.真实开发中只有一个vue实例，而且会配合着组建一起使用
        6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取data中的所有属性
        7.一旦data中的数据发生改变，那么页面模板中用到改数据的地方也会自动更新


        里面到底能写什么  js表达式
        js表达式和js代码区别
            1.表达式：一个表达式会生成一个值，可以放在一个需要值的地方：
                (1). a
                (2). a+b
                (3). demo(1)
                (4). x === y ? 'a' : 'b'
            2.js代码(语句)
                (1). if(){}
                (2). for(){}
     -->

    <!--准备容器-->
    <div id="root">
        <!-- // 插值语法'{{}}' -->
        
        <h1>Hello,{{name}},{{address}},{{Date.now()}}</h1>
    </div>
    
   

    <script type="text/javascript">
        //关闭烦人提示  生产提示
        Vue.config.productionTip = false;

        //创建vue实例
        const x = new Vue({
            el:'#root', // el用于指定当前Vue实例为哪个容器服务，值通畅为css选择器字符串
            data:{
                // data 中用于存储数据，数据给el所指定的容器去使用，值暂时先写成一个对象
                name:'大帅哥',
                address:'peking'
            }
        });
       

        // 
    </script>
</body>
</html>